﻿@model TalentDesk.Contracts.Ef.Project

<style scoped>
    #listView {
        padding: 10px;
        margin-bottom: -1px;
        min-width: 555px;
        min-height: 510px;
        background-color: transparent;
        border: 0;
    }



    .project {
        float: left;
        position: relative;
        width: 250px;
        height: 150px;
        -moz-box-shadow: 0px 0px 4px #000000;
        -webkit-box-shadow: 0px 0px 4px #000000;
        box-shadow: 0px 0px 4px #000000;
        margin: 10px;
        /*background-color: #EFEFEF;*/
        /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    }

        .project h2 {
            background: #0094ff;
            color: white;
            padding-left: 10px;
            padding-right: 10px;
            margin: 0;
            max-width: 100%;
            overflow: hidden;
            font-size: 17px;
            padding-bottom: 3px;
        }


        .project p {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            background-color: #EFEFEF;
        }

        .project .footer {
            font-size: 15px;
            color: #999;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid white;
            height: 30px;
            line-height: 30px;
            padding: 0 10px 0 10px;
        }

            .project .footer .date {
                float: left;
            }

            .project .footer .author {
                float: right;
            }

    .menu1 {
        float: right;
    }



    .k-context-menu ul li img {
        max-height: 16px;
        max-width: 16px;
        margin: 0px 7px 0px 0px;
    }
</style>



<script type="text/x-kendo-tmpl" id="template">
    <div class="project">
    <h2 onclick="showPreview(#:ProjectId#)">#:ProjectName#
    <div id="#: ProjectId #" class="menu1"><a><span class="k-icon k-i-collapse"></span></a></div></h2>
        @*<img src="@Url.Content("~/content/web/foods/")#:ProductID#.jpg" alt="#:ProductName# image" />*@
        <p>#:  kendo.toString(new Date(DueDate), 'dd.MM.yyyy') #</p>
    <div class="footer">
    <div class="date">#:kendo.toString(new Date(StartDate), 'dd.MM.yyyy') #</div>
    <div class="author">Sami Özer</div>
    </div>
    </div>
</script>

<input type="button" onclick="NewProject()" value="New Project" />
@(Html.Kendo().ListView<TalentDesk.Contracts.Ef.Project>()
    .Name("listView")

    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("_GetProject", "Project"))


    )
    .Events(e => e
            .DataBound("productListView_dataBound")

        )


)



<ul id="testMenu">
    <li value="1">Edit Project
    </li>
    <li value="2">Add Task
    </li>
    <li value="3">Add Expense
    </li>
    <li value="4">Add Attachment
    </li>
    <li value="5">Add Team User
    </li>
</ul>

<script>
    // This code belongs in a reusable .js file
    var my = {};

    my.contextMenu = function (options) {

        if (!options) { alert('You have not specified any options!'); return; }
        if (!options.trigger) { alert('You must supply a trigger element selector!'); return; }
        if (!options.menu) { alert('You must specify a menu element selector!'); return; }
        if (!options.callback) { alert('You must specify a callback function!'); return; }
        options.rightButton = options.rightButton || true;
        options.zindex = options.zindex || 999000;

        var menu = $(options.menu);
        if (!menu.parent().hasClass('k-context-menu')) menu.wrap(document.createElement('div'));
        menu = menu.parent().addClass('k-context-menu').hide();

        var panel = $('#ctxMenuPanel');
        if (!panel[0]) panel = $(document.createElement('div')).attr('id', 'ctxMenuPanel');

        menu.visible = false;
        menu.addClass('k-calendar-container k-popup k-group k-reset');
        menu.css({ position: 'absolute', 'background-color': 'white', display: 'none', 'z-index': options.zindex + 1, padding: 0 });

        menu.close = function () { menu.fadeOut('fast'); panel.hide(); menu.visible = false; };
        menu.show = function () {
            if (menu.visible) {
                menu.close();
            } else {
                var pos = $(this).offset(); pos.top += 10; pos.left += 15;
                panel.css({ top: 0, left: 0, width: '100%', height: $(document).height(), 'background-color': 'transparent' }).show();
                menu.data('trigger', $(this));
                menu.css(pos).fadeIn('fast');
                menu.visible = true;
            }
            return false;
        };

        panel.css({ position: 'absolute', display: 'none', 'z-index': options.zindex });
        panel.appendTo('html').click(menu.close);

        var list = menu.find('ul').css({ 'list-style-type': 'none', padding: 0, margin: 0 });
        list.find('li').click(function () {
            menu.close();
            options.callback($(this), menu.data('trigger'));
        }).mouseenter(function () {
            $(this).addClass('k-state-hover');
        }).mouseleave(function () {
            $(this).removeClass('k-state-hover');
        }).mousedown(function () {
            $(this).addClass('k-state-selected');
        }).mouseup(function () {
            $(this).removeClass('k-state-selected');
        }).css({ margin: 0, cursor: 'pointer', padding: '3px 7px 3px 7px' });

        // bind the triggers
        $(options.trigger).each(function (index) {
            if (options.leftButton) $(this).click(menu.show);
            if (options.rightButton) $(this).bind("contextmenu", menu.show);
        });
    };




    // This code goes in your page
    function ctxCallback(item, trigger) {

        var trigVal = trigger.attr('id');
        var rowId = trigger.parent().attr('id'); // get the row of the parent since I used the TD as my trigger.

        if (typeof trigVal == 'undefined') trigVal = trigger.html();

        if (typeof rowId == 'undefined') rowId = '';
        //else rowId = ' on row ' + rowId;
        var actionName = "";
        var controllerName = "";
        if (item.val() == 1) {
            actionName = "_EditProject";
            controllerName = "Project"
        }
        $('#modal').show();
        $('#modal').animate({ 'right': '0px' }, 300);
        $.post(
            "/" + controllerName + "/" + actionName,

             { "projectId": trigVal },
             function (result) {


                 $('#modal').html(result);

                 /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */



                 //var thkWindowElement = $('#windowProjectEdit');
                 //thkWindowElement.data('kendoWindow').content(result);
                 //thkWindowElement.data('kendoWindow').title("Yeni Abone Bilgilendirme kayıt");
                 //thkWindowElement.data('kendoWindow').center().open();
             }
        , 'html');


    }

    function productListView_dataBound() {
        my.contextMenu({
            trigger: '.menu1',
            leftButton: true,
            rightButton: true,
            menu: '#testMenu',
            callback: ctxCallback
        });
    }


   @* function showPreview(id) {
       
        $.post('@Url.Action("ProjectView", "Project")',
            { "projectId": id },
            function (data) {
                var thkWindowElement = $('#windowProjectView');
                thkWindowElement.data('kendoWindow').content(data);
                thkWindowElement.data('kendoWindow').title("Yeni Abone Bilgilendirme kayıt");
                thkWindowElement.data('kendoWindow').center().open();
              

            }
           , 'html');
    }*@

    function NewProject() {
        $('#modal').show();
        $('#modal').animate({ 'right': '0px' }, 300);
        $.post(
            "/Project/_NewProject",
             function (result) {
                 $('#modal').html(result);
             }
        , 'html');
    }



</script>

@(Html.Kendo().Window()
    .Name("windowProjectView")


        .Width(500)

        .Draggable()
        .Resizable()
        .Title("Rams's Ten Principles of Good Design")
        .Actions(actions => actions.Refresh().Close())
        .Visible(false)



)


